<script lang='ts' setup>

const classNames = ref('no-drag')
const isDown = ref(false)
function handleDoubleClick() {
  window.electron.ipcRenderer.send('application:toggle-maximize-window')
}

function handleMouseDown(e: MouseEvent) {

  if (e.button == 0) {
    classNames.value = 'drag'
  }
}

function handleMouseUp(_e: MouseEvent) {
  isDown.value = false
  classNames.value = 'no-drag'
}

function handlerMouseOver(_e: MouseEvent) {
 isDown.value = false
}

</script>

<template >
  <div class="drag-area"
    @dblclick="handleDoubleClick"
    @mousedown="handleMouseDown"
    @mouseup="handleMouseUp"
    @mouseover="handlerMouseOver"
  >
  <div :class="classNames">
    <slot />
  </div>
  </div>
</template>

<style scoped lang='less'>
</style>
